<template>
	<eui-popup ref="CancelOrderPopup" background-color="#fff" :type="type" :mask-click="false">
		<view class="popup-content">
			<view class="popup-title flex just-between">
				<view style="font-weight: bold;">
					{{ title }}
				</view>
				<bcm-close-btn @click="close" />
			</view>
			<scroll-view style="padding: 8rpx 8rpx 50rpx 30rpx;box-sizing: border-box;height: 60vh;" class="text-left"
				scroll-y="true">
				<view>
					<radio-group @change="selectItem">
						<template v-if="modalType == 'cancel'">
							<view v-for="item in getBcmDictList('orderCancelReasonType')" :key="item.value"
								style="margin-top: 20rpx;line-height: 35rpx">
								<radio :value="item.value" :checked="orderCancelReasonType1 === item.value">
									{{ item.text }}
								</radio>
							</view>
						</template>

						<template v-if="modalType == 'rejectOrderCancelApply'">
							<view v-for="(item, index) in getBcmDictList('rejectOrderCancelApplyType')" :key="index"
								style="margin-top: 20rpx;line-height: 35rpx">
								<radio :value="item.value" :checked="orderCancelReasonType1 === item.value">
									{{ item.text }}
								</radio>
							</view>
						</template>

						<template v-if="modalType == 'reject'">
							<view v-for="(item, a) in dealList" :key="a" style="margin-top: 20rpx;line-height: 35rpx">
								<radio :value="item.value" :checked="orderCancelReasonType1 === item.value">
									{{ item.text }}
								</radio>
							</view>
						</template>

					</radio-group>
					<textarea placeholder="请输入原因"
						style="border: 1px solid #ccc; width: 95%; border-radius: 10rpx; margin-top: 20rpx; padding: 20rpx; box-sizing: border-box"
						v-if="orderCancelReasonType1 == '999'" @input="inputChange"></textarea>

				</view>
			</scroll-view>
			<slot></slot>
		</view>
	</eui-popup>
</template>
<script>
	import BcmCloseBtn from '../../components/BcmCloseBtn.vue';
	import { getBcmDictList } from '../../../../hooks/bcmUseUntils';
export default {
	name: "CancelOrderPopup",
	props: {
		scope: {
			type: Object,
			default: {}
		},
		type: {
			type: String,
			default: 'bottom'
		},
		show: {
			type: Boolean,
			default: false
		},
		modalType: {
			type: String,
			default: 'cancel'
		},
		title: {
			type: String,
			default: '取消订单原因'
		},
		orderCancelReasonType: {
			type: String,
			default: ''
		},
		dealList: {
			type: Array,
			default: []
		},
	},
	components: {
		BcmCloseBtn
	},
	watch: {
		show(val){
			if (val) {
				this.$refs.CancelOrderPopup.open('bottom');
			}else{
				this.close()
			}
		},
		orderCancelReasonType(val){
			this.orderCancelReasonType1 = val;
		}
	},
	data() {
		return {
			orderCancelReasonType1: ''
		}
	},
	methods: {
		close() {
			this.$refs.CancelOrderPopup.close();
			this.$emit('close');
		},
		getBcmDictList,
		selectItem(item) {
			this.$emit('select',item)
		},
		inputChange(e){
			this.$emit('inputchange',e)
		}
	},
}
</script>
<style lang="scss" scoped>
@import "@/static/font/enjoyicon/iconfont.css";
@import "../../common/common.css";

.popup-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  background-color: #fff;

  .popup-title {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 100rpx;
    padding-right: 36rpx;
    padding-left: 30rpx;
    font-size: 33rpx;
    line-height: 100rpx;
    border-bottom: 1rpx solid #f1f1f1;
  }
}

.bottom-1 {
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
  height: 70rpx;
  padding: $uni-spacing-col-sm * 2 $uni-spacing-row-sm;
  background: $uni-bg-color;
  // border-top: 1rpx solid #979797;
}
</style>
